<template>
	<view class="pb124">
		<!-- 搜索框部分 -->
		<view class="w710 auto pt26">
			<u-search
				height="80"
				bgColor="#F5F6FA"
				:show-action="false"
				color="#A6A7A9"
				placeholder="请输入你要搜索的产品"
				v-model="search"
				:inputStyle="{ fontSize: '28rpx' }"
				@input="input"
			></u-search>
		</view>
		<!-- tab部分 -->
		<view class="tabs mt28">
			<u-tabs
				:list="list"
				:is-scroll="false"
				v-model="current"
				@change="change"
				activeColor="#260E03"
				inactiveColor="#260E03"
				:barStyle="{ background: 'linear-gradient(180deg, #FF8964 0%, #FD4B2C 100%)' }"
			></u-tabs>
		</view>
		<!-- 数据部分 -->
		<view class="mb40" v-for="(item, index) in arr" :key="item.id">
			<IndexData :data="item" @goDetails="goDetails"></IndexData>
		</view>
		<!-- 弹窗 -->
		<u-popup v-model="show" mode="center" width="600" height="1000">
			<view style="padding: 20rpx;">
				<view>尊敬的客户：</view>
				<view>
					我公司谨遵《私募投资基金监督管理暂行办法》之规定，只向特定的合格投资者宣传推介相关私募投资基金产品。
				</view>
				<view>
					在继续注册本公司公众号会员前，请您确认您或您所代表的机构是一名"合格投资者"。您若继续阅读本网站所载资料，将被视为您声明及保证为"合格投资者"，并将遵守对您适用的有关法律法规。为了有效维护您的投资权益，请您注意以下事项：
				</view>
				<view>1、确认为您提供服务的顾问为社区助手或下属公司在册员工；</view>
				<view>2、确认员工向您介绍的产品为社区助手或下属公司认可产品；</view>

				<view>3、确认明确了解所投产品的收益类型及风险属性；</view>
				<view>
					4、不要轻易相信保本保息承诺，类固定收益产品或浮动收益产品都不能对本金及收益作出任何承诺；
				</view>
				<view>
					5、浮动收益类产品必须接受投资顾问当面提示风险，见证认购资料签署，并进行全程录音录像；
				</view>
				<view>6、产品重要要素请以产品合同文本载明信息为准；</view>
				<view>
					7、请确保产品的所有认购资料(包括产品合同、产品说明书、调查问卷等）都由您本人签字确认。
				</view>
				<view class="pbtn" @click="show = false">确定</view>
			</view>
		</u-popup>
		<TabBar :select="1"></TabBar>
	</view>
</template>

<script setup>
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { reactive, ref, onMounted } from 'vue';
import { indexGooods } from '@/utils/api.js';
onLoad(() => {
	change();
});

onMounted(() => {
	let pageHead = document.getElementsByTagName('uni-page-head');
	pageHead[0].style.display = 'none';
});
let show = ref(true);
//tabs数组
let list = reactive([
	{
		name: '全部'
	},
	{
		name: '预热中'
	},
	{
		name: '热销中'
	},
	{
		name: '已售罄'
	}
]);
//跳转到产品详情页面
const goDetails = id => {
	uni.navigateTo({
		url: '/pages/details/details?id=' + id
	});
};

let current = ref(0); //当前激活的下标
let arr = ref([]); //循环的数组
let limit = ref(0);
let type = ref('all');
let search = ref('');
let change = (index = 0) => {
	current.value = index;
	if (current.value == 0) {
		type.value = 'all';
		getProduct('all');
	}
	if (current.value == 1) {
		limit.value = 0;
		type.value = 0;
		getProduct(type.value);
		arr.value = arr.value.filter(el => el.type == 0);
	}
	if (current.value == 2) {
		limit.value = 0;
		type.value = 1;
		getProduct(type.value);
		arr.value = arr.value.filter(el => el.type == 1);
	}
	if (current.value == 3) {
		limit.value = 0;
		type.value = 2;
		getProduct(type.value);
		arr.value = arr.value.filter(el => el.type == 2);
	}
};
const getProduct = () => {
	let data = {
		type: type.value,
		limit: limit.value,
		page: 10,
		search: search.value
	};
	indexGooods(data).then(res => {
		if (limit.value == 0) {
			arr.value = res.data;
		}
		if (limit.value > 0) {
			if (res.data.length === 0) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				});
			} else {
				arr.value.push(...res.data);
			}
		}
	});
};
//搜索
let input = () => {
	let data = {
		type: type.value,
		limit: limit.value,
		page: 10,
		search: search.value
	};
	indexGooods(data).then(res => {
		if (limit.value == 0) {
			arr.value = res.data;
		}
		if (limit.value > 0) {
			if (res.data.length === 0) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				});
			} else {
				arr.value.push(...res.data);
			}
		}
	});
};
onReachBottom(() => {
	limit.value += 10;
	getProduct(type.value);
});
</script>

<style lang="scss" scoped>
page {
	background: #fff;
}
:deep(.u-icon__icon) {
	font-size: 40rpx !important;
	padding-left: 20rpx;
}
.pbtn {
	width: 500rpx;
	height: 80rpx;
	font-size: 36rpx;
	text-align: center;
	line-height: 80rpx;
	margin: 0rpx auto;
	margin-top: 60rpx;
	color: #fff;
	border-radius: 20rpx;
	background: linear-gradient(137deg, #f65249 0%, #e1251b 100%);
}
</style>
